<template>
  <div>
    <el-tabs
      type="border-card"
      v-model="activeName"
      @tab-click="handleTabClick"
      @tab-change="handleTabChange"
    >
      <el-tab-pane label="终端区进/离港架次" name="TMA" lazy>
        <ChartTMA />
      </el-tab-pane>
      <el-tab-pane label="终端区02/03/13模块" name="020313" lazy>
        <Chart213 />
      </el-tab-pane>
      <!-- <el-tab-pane label="终端区03/12扇区建议" name="312" lazy>
        <Chart312 />
      </el-tab-pane> -->
      <el-tab-pane label="终端区弹性图表" name="Flex" lazy>
        <ChartFree />
      </el-tab-pane>
      <el-tab-pane label="机场起/降架次 (终端)" name="Airports" lazy>
        <ChartAirports />
      </el-tab-pane>
      <el-tab-pane label="机场起飞正常率 (终端)" name="Rates" lazy>
        <ChartRates />
      </el-tab-pane>
      <el-tab-pane label="机场起/降架次 (川南)" name="SouthAirports" lazy>
        <ChartSouthAirports />
      </el-tab-pane>
    </el-tabs>
    <AlertView v-if="showAlert" alert-name="NTFM" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

import useFlowStore from "@/store/flow.js";

import ChartTMA from "./ChartTMA/index.vue";
import ChartAirports from "./ChartAirports/index.vue";
import Chart213 from "./Chart213/index.vue";
import Chart312 from "./Chart312/index.vue";
import ChartRates from "./ChartRates/index.vue";
import ChartSouthAirports from "./ChartSouthAirports/index.vue";
import ChartFree from "./ChartFree/index.vue";

import AlertView from "@/components/Alert/index.vue";

const router = useRouter();
const route = useRoute();
const flowStore = useFlowStore();
const showAlert = computed(() => flowStore.isStoped);

const activeName = ref("ChartTMA");

const availableNames = ref([
  "TMA",
  "Airports",
  "020313",
  "312",
  "Rate",
  "SouthAirports",
  "Flex",
]);

const handleTabClick = (tab, event) => {};
const handleTabChange = (name) => {
  router.push({
    query: { chartName: name },
  });
};

onMounted(() => {
  if (
    route.query.chartName &&
    availableNames.value.includes(route.query.chartName)
  ) {
    activeName.value = route.query.chartName;
  } else {
    activeName.value = availableNames.value[0];
    router.push({
      query: { chartName: activeName.value },
    });
  }
});
</script>
